import React from 'react';
import { Form, Input, Select, Button, Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import UploadUtil from '../../UploadUtil'

const { Option } = Select;

class ModuleEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            imageUrl: '',
            imgList: [],
            datas: {}
        }
    }
    formRef = React.createRef();
    componentDidMount() {
        const { current } = this.props;
        if (current && current != null) {
            this.setState({ datas: current });
            if(current.logo)
            {
                this.setState({ imageUrl: UploadUtil.imgServ + current.logo });
            }
            this.formRef.current.setFieldsValue({ module: current });
        }
    }
    onFinish = async (values) => {
        var act = "CrudModel/create";
        if (values.module.id > 0) {
            act = "CrudModel/update";
        }
        if (this.state.imgList && this.state.imgList.length > 0) {
            var logo = await UploadUtil.uploadPic(this.state.imgList, module.moduleName, "Module", "logo");
            values.module.logo = logo;
        }
        this.props.dispatch({
            type: act,
            payload: values.module,
            control: 'Module',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('保存成功！');
            }
            else {
                message.error('保存错误，请联系管理员');
            }
        });
    };
    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            UploadUtil.getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    imageUrl,
                    imgList: info.fileList,
                    loading: false,
                }),
            );
        }
    };
    render() {
        const layout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };
        const uploadButton = (
            <div>
                {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        const { imageUrl } = this.state;
        return (
            <div>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Form.Item
                        name={['module', 'moduleName']}
                        label="应用名称"
                        rules={[{ required: true, message: "请输入业务名称" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['module', 'moduleType']}
                        label="应用类型"
                        rules={[{ required: true, message: "请输入业务类型" }]}>
                        <Select>
                            <Option value="BS">Saas应用</Option>
                            <Option value="Report">业务报表</Option>
                            <Option value="CS">本地应用</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name={['module', 'authUser']}
                        label="授权用户"
                        rules={[{ required: true, message: "请输入授权用户" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['module', 'authPassword']}
                        label="授权密码"
                        rules={[{ required: true, message: "请输入授权密码" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['module', 'modulePath']}
                        label="应用路径"
                        rules={[{ required: true, message: "请输入业务路径" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['module', 'description']}
                        label="描述信息"
                        rules={[{ required: true, message: "请输入描述信息" }]}>
                        <Input.TextArea />
                    </Form.Item>
                    <Form.Item label="应用图标">
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action=""
                            beforeUpload={UploadUtil.beforeUpload}
                            onChange={this.handleChange}
                        >
                            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                        </Upload>
                    </Form.Item>
                    <Form.Item
                        name={['module', 'protocol']}
                        label="协议名称">
                        <Input />
                    </Form.Item>
                    <div style={{display:"none"}}>
                    <Form.Item
                        name={['module', 'logo']}
                        label="logo">
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['module', 'id']}
                        label="ID">
                        <Input />
                    </Form.Item>
                    </div>
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 4 }}>
                        <Button type="primary" htmlType="submit">确定</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

export default connect(({ user, CrudModel, Module }) => ({
    currentUser: user.currentUser,
    response: CrudModel.response,
    current: Module.current,
}))(ModuleEdit);